<template>
	<view class="content" :style="{backgroundImage:`url(${indexBackgroundImage})`}">
		<view class="title">
		</view>
		<view class="main">
			<view class="logo">
				<image src="/static/publishPractice/logo1.png" mode=""></image>
			</view>
			<view class="detail">
				<view class="detailTitle">
					<text>请选择您要找的牛人</text>
				</view>
				<view class="detailName">
					<view class="detailNameLeft">
						<text class="light">请填写职位名称</text>
						<input type="text" placeholder="某某某职位" v-model="pub.position" placeholder-style="{
							width: 350px;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #283D82;
						}" value="" />
					</view>
					<u-icon name="close-circle" color="#384B8B" size="28" @click="pub.position = ''"></u-icon>
				</view>
				<view class="detailName" style="display: none;">
					<view class="detailNameLeft">
						<text class="light">请输入职能</text>
						<u-input type="textarea" placeholder="请输入职能" v-model="pub.function.value" maxlength="500" fixed
                     placeholder-style="{
							width: 350px;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #283D82;
						}" value="" />
					</view>
				</view>
				<view class="detailName">
					<view class="detailNameLeft">
						<text class="light">请选择经验要求</text>
						<input
                @click="getExperience"
                type="text" placeholder="经验要求" disabled v-model="pub.experience.value" placeholder-style="{
							width: 350px;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #283D82;
						}" value="" />
					</view>
				</view>
				<view class="detailName">
					<view class="detailNameLeft">
						<text class="light">请选择学历要求</text>
						<input @click="getUserEducation" type="text" placeholder="学历要求" v-model="pub.education.value" disabled placeholder-style="{
							width: 350px;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #283D82;
						}" value="" />
					</view>
				</view>
				<view class="detailName">
					<view class="detailNameLeft">
						<text class="light">请选择薪资待遇</text>
						<input @click="getSalary"
                   type="text" :placeholder="`${urlDetails.index==='3'?'日薪':'月薪'}薪资待遇`"
                   v-model="pub.salaryRange.value" disabled
							placeholder-style="{
							width: 350px;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #283D82;
						}" value="" />
					</view>
				</view>

				<!-- 福利待遇 -->
				<view class="welfare">
					<view class="welfareTitle">
						<text>请选择福利待遇</text>
					</view>
					<view class="check">
						<checkbox-group @change="checkboxChange" class="checkbox-group">
							<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in pub.welfare.list" :key="index">
								<view class="items">
									<checkbox :value="item.value" :checked="item.checked" style="transform:scale(0.7)"/>
								</view>
								<view class="itemsName">{{item.label}}</view>
							</label>
						</checkbox-group>
					</view>
				</view>
				<!-- 福利待遇 -->

        <view class="detailName">
          <view class="detailNameLeft">
            <text class="light">公司地址</text>
            <u-input

                   type="text" placeholder="请输入公司地址"
                   v-model="pub.address.value"
                   placeholder-style="{
							width: 350px;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #283D82;
						}" value="" />
          </view>
        </view>

				<view class="detailName">
					<view class="detailNameLeft">
						<text class="light">请输入职位描述</text>
						<u-input type="textarea" placeholder="请输入500字以内职位描述" v-model="pub.jobDescription.value"
							maxlength="500" fixed placeholder-style="{
							width: 350px;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #283D82;
						}" value="" />
					</view>
				</view>
			</view>

			<view class="buttom">
				<button type="default" @click="onSend">确认发布</button>
			</view>
		</view>
    <u-select v-if="pub.experience.list.length" v-model="pub.experience.show"  :list="pub.experience.list" @confirm="conExperienceSelect"
              :default-value="pub.experience.index"
    ></u-select>
    <u-select v-if="pub.education.list.length" v-model="pub.education.show"  :list="pub.education.list" @confirm="conEducationSelect"
              :default-value="pub.education.index"
    ></u-select>
    <u-select v-if="pub.salaryRange.list.length" v-model="pub.salaryRange.show"  :list="pub.salaryRange.list" @confirm="conSalaryRangeSelect"
              :default-value="pub.salaryRange.index"
    ></u-select>
		<Tabbar :current="2"></Tabbar>
	</view>
</template>

<script>
	import indexBackgroundImage from "@/static/publishPractice/bg1.png"
  import{selectPicData as selectData} from '@/utils/utils'
  import {getDictItems} from '@/api/dict'
  import {addCompanyPosition,editCompanyPosition} from '@/api/company'
  import {comDeliveryInfo} from '@/api/myCompan'

	export default {
		data() {
			return {
				indexBackgroundImage: indexBackgroundImage,
        urlDetails:{},//地址栏参数
        companyId:'',//公司id
				//福利待遇复选框
				//实习数据
				pub: {
					position: '', //职位
					function: {
						...selectData,
						value: '',
					}, //职能选择
					experience: {
						...selectData,
						value: '',
					},
					education: {
						...selectData,
						value: '',
					},
					salaryRange: {
						...selectData,
						value: '',
					},
					welfare: {
						...selectData,
						value: '',
            valueList:[],//选择的数据
					},
					jobDescription: {
						...selectData,
						value: '',
					},
					address: {
						...selectData,
						value: '',
					},

				},
				items: [{
						value: '1',
						name: '五险一金'
					},
					{
						value: '2',
						name: '双休',
						checked: 'true'
					},
					{
						value: '3',
						name: '节日礼物'
					},
					{
						value: '4',
						name: '带薪年假'
					},
					{
						value: '5',
						name: '定期团建'
					}
				],
			}
		},
    onLoad({type,name,index,id}){
      this.urlDetails = {type,name,index,id}
      if(this.urlDetails.id){
        this. comDeliveryInfo(id)
      }
      uni.setNavigationBarTitle({ title:type==='practice'?'实践':type==='practise'?'实习':'校招' });

    },
    mounted() {
      this. getPositionWelfare()
      this. getDictsIndex()
      this. getDictsIndex('user_education','education')
      if(+this.urlDetails.index==3){
        this. getDictsIndex('day_salary','salaryRange')
      } else {
        this. getDictsIndex('position_salary','salaryRange')
      }


    },
		methods: {
			//跳转列表对应页面
			nextPage(url) {
				uni.navigateTo({
					url: url,
					fail() {
						uni.switchTab({
							url: url,
							fail() {
								uni.showToast({
									title: '暂未开通，敬请期待！',
									icon: 'none'
								});
							}
						});
					}
				});
			},
      //经验
      detailExperiencePub(pub,key='experience',arr='experience'){
        this.copyDetails(pub,key,arr)
      },
      detailfindIndex(pub,arr,data){
        const index = pub[arr].list.findIndex((item,index)=>{
          if(item.value===data['value']){
            return index
          }
        })
        this.pub[arr].value =data['label']
        this.pub[arr].id =data['value']
        this.pub[arr].index=[index]
      },
      copyDetails(pub,key='experience',arr='experience'){
        let data ={
          label:'',
          value:'',
        }
        pub[arr].list.map(item=>{
          if( +item.value===key){
            data['label'] = item.label
            data['value'] = item.value
          }
        })
       this.detailPubMap(pub,arr,data)
      },
      detailPubMap(pub,arr,data){
        this.detailfindIndex(pub,arr,data)
      },
      //详情
      comDeliveryInfo(id){
        comDeliveryInfo(id).then(res=>{
          const {code,result} = res
          if(code===200){
            this.pubWelfareList(this.pub,result)
          }
        }).catch(e=>{
          console.log ( e )
        })
      },
      setTimeoutDetailExperiencePub(pub,result){
        this.detailExperiencePub(pub,result.experience,'experience')
        this.detailExperiencePub(pub,result.education,'education')
      },
      salaryTypeValue(pub,result){
        if(result.salaryType===1){
          this.detailExperiencePub(pub,result.positionSalary,'salaryRange')
        } else if(result.salaryType===2){
          this.detailExperiencePub(pub,result.daySalary,'salaryRange')
        }
      },
      copySetTimeoutDetail(pub,resultData){
        this.setTimeoutDetailExperiencePub(pub,resultData)
        this.salaryTypeValue(pub,resultData)
      },
      pubWelfareListMap(pub,psd){
        const welfareList = []
        pub.welfare.list.map(w=>{
          psd.map(k=>{
            if(w.value===k){
              w.checked=true
              welfareList.push(w.value)
            }
            return w
          })

        })
        pub.welfare.valueList  =welfareList
      },
      pubWelfareList(pub,resultData){
        const {positionDesc,positionName,positionWelfare,companyId,address} = resultData
        pub.jobDescription.value =positionDesc
        pub.address.value = address
        this.companyId=companyId
        pub.position=positionName
        const psd = positionWelfare.split(',')
        setTimeout(()=>{
         this. copySetTimeoutDetail(pub,resultData)
         this.pubWelfareListMap(pub,psd)

        },1000)
      },
      //复合
      onConfirmData(data,arr){
        const {value,label} =data[0]
        this.pub[arr].value =label
        this.pub[arr].id =value
        const index=  this.pub[arr].list.findIndex(item=>{
          return item.value===value
        })
        this.pub[arr].index=[index]
      },
      //经验
      conExperienceSelect(data){
        this.onConfirmData(data,'experience')
      },
      //学历
      conEducationSelect(data){
        this.onConfirmData(data,'education')
      },
      //薪资
      conSalaryRangeSelect(data){
        this.onConfirmData(data,'salaryRange')
      },
      //福利操作
      checkboxChange(data){
        this.pub.welfare.valueList =  data.detail.value
      },
      //工作经验
      getExperience(){
        this.pub.experience.show=true

      },
      //学历要求
      getUserEducation(){
        this.pub.education.show=true

      },
      //职位福利
      getPositionWelfare(){
        this. getDictsIndex('position_welfare','welfare')
        setTimeout(()=>{
          this.pub.welfare.list.push({
            checked: false,
            label: "无",
            value: "无"
          })
        },500)
      },
      //薪资
      getSalary(){
        this.pub.salaryRange.show=true
      },
      getDictsIndex(code='experience',key='experience'){

        getDictItems(code).then(res=>{
          const {code,result} = res
          let list = []

          result.map((item,index)=>{
            list.push({
              label:item.text,
              value:item.value
            })
            this.pub[key].list= list
            if(key==='welfare'){

              this.pub[key].list.map(item=>{
                this.$set(item,'checked',false)
              })
            }
            this.$forceUpdate()
          })

        }).catch(e=>{
          console.log (e)
        })
      },
      //发布操作
      onSend(){
        const type = +this.urlDetails.index
        const pub= this.pub
        if(!pub.position.length){
          this.$showToast('请输入职位名称')
          return
        }
        if(!pub.experience.value.length){
          this.$showToast('请选择工作经验')
          return
        }
        if(!pub.education.value.length){
          this.$showToast('请选择学历')
          return
        }
        if(!pub.salaryRange.value.length){
          this.$showToast('请选择职位薪资')
          return
        }
        if(!pub.jobDescription.value.length){
          this.$showToast('请输入职位描述')
          return
        }
        if(!pub.address.value.length){
          this.$showToast('请输入公司地址')
          return
        }
        const data = {
          "education": pub.education.id,//学历
          "experience": pub.experience.id,//经验
          "positionDesc": pub.jobDescription.value,//描述
          "positionName": pub.position,//职位名称
          "salaryType":type===3?2:1,
          "positionWelfare":pub.welfare.valueList.join(','),//福利
          "recruitmentType": type,//就业类型
          "address":pub.address.value
        }
        if(type===3){
          data['daySalary']=pub.salaryRange.id
        }else {
          data['positionSalary']=pub.salaryRange.id
        }
        this.$showLoading({
          title:this.urlDetails.id?'编辑中...':'发布中...'
        })
        if(this.urlDetails.id){
          data['id'] = this.urlDetails.id
          data['companyId']=this.companyId
          this.onPubFunction(editCompanyPosition,data)
        } else {
          this.onPubFunction(addCompanyPosition,data)
        }


      },
      onPubFunction(cb,data){
        cb( data ).then(res=>{
          const {code,message,result} =res
          this.$hideLoading()
          if(code===200){
            this.$showToast(result)
            this.$navigateBack()
          } else {
            this.$showToast(message)
          }
        }).catch(e=>{
          this.$hideLoading()
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.title {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;

			.u-icon {
				position: absolute;
				height: 100rpx;
				left: 20rpx;
			}

			text {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}

		.main {
			height: 100%;
			position: relative;
			margin: 130rpx 36rpx 20rpx 36rpx;
			padding-bottom: 100rpx;

			.logo {
				position: absolute;
				width: 100%;
				top: -138rpx;
				text-align: center;

				image {
					width: 320rpx;
					height: 174rpx;
				}
			}

			.detail {
				padding: 30px 25rpx 10rpx 25rpx;
				background: #FFFFFF;
				border-radius: 20rpx;

				.detailTitle {
					text-align: center;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #283D82;
				}

				.detailName:nth-child(2) {
					border: 0;
				}

				.detailName {
					margin: 20rpx;
					padding-top: 16rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-top: #EAEAEA 1rpx solid;

					.detailNameLeft {
						flex: 1;

						.light {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #646566;
						}

						input {}
					}
				}
				.welfare {
					margin: 20rpx;
					padding-top: 16rpx;
					border-top: #EAEAEA 1rpx solid;
					.welfareTitle {
						margin-bottom: 10rpx;
						text {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #646566;
						}
					}
					.check{
						.uni-list-cell{
							margin-left: 10rpx;
							display: flex;

							.items{
								checkbox{

								}
							}
						}
					}
				}
			}

			.jobAddress {
				margin-top: 20rpx;
				padding: 15rpx 45rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex: 1;
				background: #FFFFFF;
				border-radius: 20rpx;

				.jobAddressLeft {
					flex: 1;

					.light {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #646566;
					}

					input {
						width: 100%
					}
				}
			}

			.buttom {
				margin: 20rpx 0;
        margin-top: 44rpx;
				button {
					height: 70rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					background: #53B9B2;
					border: #53B9B2;
					border-radius: 40rpx;
				}
			}
		}
	}
  .checkbox-group{
    display: flex;
    flex-wrap: wrap;
  }
</style>
